<template>
  <div style="margin: 10px">
    <Screen @query="query" />
    <Tabel
      :columns="columns"
      :table-data="category"
      :loading="loading"
      :page-index="queryForm"
      @handleCurrent="handleCurrent"
    >
      <el-table-column
        slot="handleColumn"
        label="操作"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="categoryEdit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </Tabel>
  </div>
</template>
<script>
const Screen = () => import('./components/screen')
const Tabel = () => import('@/components/Table')
import { getCategory } from '@/api/category'
export default {
  components: {
    Screen,
    Tabel
  },
  data() {
    return {
      loading: false, // 加载
      columns: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'name',
          label: '标签'
        }
      ],
      category: [], // 分类列表
      queryForm: {
        size: 20,
        current: 1
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    query() {
      getCategory().then((res) => {
        this.category = res
      })
    },
    // 文章编辑
    categoryEdit() {},
    // 选中行
    handleCurrent() {}
  }
}
</script>
<style scoped>
</style>
